<template>
  <view>
    <view>
      <!-- 头像 -->
      <view class="header_block">
        <!-- 修改头像 -->
        <img :src="companyAvatar" alt="" class="user_avater" @click="changeAvatar">
        <view class="body_center">
          <span>{{ companyInfo.company.name }}</span>
          <view class="isCertify_cell">认证时间：{{ parseTimePage(companyInfo.companyCertTime) }}</view>
        </view>
      </view>

      <uni-list>
        <!-- 系统版本 -->
        <uni-list-item title="系统版本：基础版">
          <template v-slot:footer v-if="companyInfo.loginType != 3">
            <view style="color: #999;font-size: 26rpx;" @click="logOff">注销企业</view>
          </template>
        </uni-list-item>
        <!-- 企业账户 -->
        <uni-list-item
            :title="'企业账户唯一编号：' + companyInfo.company.companyNickId"
            @click="toModifyCompanyInfo"
            clickable>
          <template v-slot:footer v-if="companyInfo.loginType != 3">
            <view style="color: #999;font-size: 26rpx;">企业更名</view>
          </template>
        </uni-list-item>
        <!-- 统一社会信用代码 -->
        <uni-list-item
            :title="'统一社会信用代码：' + companyInfo.company.creditCode"
            rightText="查看执照"
            @click="openidCardVisible"
            clickable/>
      </uni-list>
      <!-- 账户余额信息 -->
      <uni-list style="margin: 20rpx 0;">
        <!-- 账户余额 -->
        <view class="list-item" style="border-bottom: 1rpx solid #eee;">
          <p>账户余额：{{ companyInfo.company.balance }}元</p>
          <view>
            <view size="mini" class="optino_btn" @click="recharge">余额充值</view>
            <view size="mini" class="optino_btn" @click="balanceList" style="margin:0 80rpx;">余额明细</view>
            <view size="mini" class="optino_btn" @click="balanceDetailed">充值记录</view>
          </view>
        </view>
        <!-- 合同签署量 -->
        <view class="list-item">
          <p>合同签署量：{{ companyInfo.remainingNum }}次</p>
          <view>
            <view size="mini" class="optino_btn" @click="product">立即购买</view>
            <view size="mini" class="optino_btn" @click="signList" style="margin:0 80rpx;">签署明细</view>
            <view size="mini" class="optino_btn" @click="signRecord">签署套餐</view>
          </view>
        </view>
      </uni-list>
      <!-- 企业管理员 -->
      <uni-list>
        <uni-list-item title='企业管理员'></uni-list-item>
        <!-- 法定代表人 -->
        <view class="list-item" style="border-top: 1rpx solid #eee;border-bottom: 1rpx solid #eee;">
          <template v-if="companyInfo.legalPerson == null">
            <p> 法定代表人：{{ companyInfo.company.leader }}<span class="card-body-desc">账号：--</span></p>
            <view class="certify-time">
              <span>认证时间：--</span>
              <view v-if="companyInfo.loginType == 1" @click="toShowEditLegalDialog(1)">创建</view>
            </view>
          </template>
          <template v-else>
            <p>法定代表人：{{ companyInfo.company.leader }}
              <span class="card-body-desc">账号：
                <span v-if="companyInfo.loginType == 3">{{ companyInfo.legalPerson.mobileHide }}</span>
                <span v-else>{{ companyInfo.legalPerson.mobile }}</span>
              </span>
            </p>
            <view class="certify-time">
              <span>认证时间：{{ parseTimePage(companyInfo.legalPersonCertTime) }}</span>
              <view v-if="companyInfo.loginType == 0" @click="toShowEditLegalDialog(0)">变更</view>
            </view>
          </template>
        </view>
        <!-- 企业管理员 -->
        <view class="list-item">
          <p>企业管理员：{{ companyInfo.adminPerson.name }}
            <span class="card-body-desc">账号：
						  <span v-if="companyInfo.loginType == 3">{{ companyInfo.adminPerson.mobileHide }}</span>
					    <span v-else>{{ companyInfo.adminPerson.mobile }}</span>
            </span>
          </p>
          <view class="certify-time">
            <span>认证时间：{{ parseTimePage(companyInfo.adminPersonCertTime) }}</span>
            <view
                v-if="companyInfo.loginType == 0 || companyInfo.loginType == 1"
                @click="toShowEditAdminDialog"
            >转授
            </view>
          </view>
        </view>
      </uni-list>
      <!-- 底部部分 -->
      <uni-list style="margin-top: 20rpx;">
        <uni-list-item title="电子签名服务" note="通过可靠的电子签名完成文件的签署。">
          <template v-slot:footer>
            <uni-tag type="primary" text="已开通" class="info-tag"/>
          </template>
        </uni-list-item>
        <uni-list-item title="物理用印服务" note="通过印控仪操作物理印章完成文件盖章，并记录使用签署数据。">
          <template v-slot:footer>
            <uni-tag type="info" text="未开通" class="info-tag"/>
          </template>
        </uni-list-item>
        <uni-list-item title="客户服务热线：400-891-3655" rightText="点击咨询" clickable @click="phone"/>
      </uni-list>
    </view>
    <!-- 账户注销弹出框 -->
    <log-off ref="logOff"></log-off>
    <!-- 企业名称变更弹出框 -->
    <modify-company-info ref="modifyCompanyInfo" @success="getInfo"></modify-company-info>
    <!-- 转授企业管理员 -->
    <modify-company-admin ref="modifyCompanyAdmin" @success="getInfo"></modify-company-admin>
    <!-- 变更企业法人身份 -->
    <modify-company-legal ref="modifyCompanyLegal" @success="getInfo"></modify-company-legal>
  </view>
</template>

<script>
import {getToken} from '@/utils/auth'
import config from '@/config'
import {parseTime} from "@/utils/common";
import {getCompanyInfo} from "@/api/ec/console/index";
import logOff from "@/components/logOff/index";
import modifyCompanyInfo from "./modifyCompanyInfo";
import modifyCompanyAdmin from "./modifyCompanyAdmin";
import modifyCompanyLegal from "./modifyCompanyLegal";

export default {
  components: {logOff, modifyCompanyInfo, modifyCompanyAdmin, modifyCompanyLegal},
  data() {
    return {
      // 企业信息
      companyInfo: {
        company: {},
        legalPerson: {},
        adminPerson: {},
        loginType: null,
        staffNum: null,
      },
      // host地址
      host: config.baseUrl,
      //企业默认头像
      companyAvatar: require("@/static/images/company-info.png"),
    }
  },
  onLoad() {
    this.bindingRefreshData();
  },
  onUnload() {
    this.unbindingRefreshData();
  },
  created() {
    this.getInfo();
  },
  methods: {
    /** 日期格式化 */
    parseTimePage(createTime) {
      return parseTime(createTime, '{y}-{m}-{d}  {h}:{i}:{s}');
    },
    /** 绑定 */
    bindingRefreshData() {
      // 刷新页面数据
      uni.$on('refreshCompanyInfoData', () => {
        this.getInfo();
      });
      // 头像图片剪切成功
      uni.$on('companyInfoCropperSuccess', (base64, type) => {
        this.cropperSuccess(base64, type);
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('companyInfoCropperSuccess');
    },
    /** 账户信息 */
    getInfo() {
      this.$modal.loading();
      getCompanyInfo().then(response => {
        uni.hideLoading()
        this.companyInfo = response.data;
        this.companyAvatar = (this.companyInfo.company.avatar == "" || this.companyInfo.company.avatar == null) ? this.companyAvatar : this.host + this.companyInfo.company.avatar;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    // =================================================================================================================
    // ==== 修改头像
    // =================================================================================================================
    /** 修改头像 */
    changeAvatar() {
      uni.navigateTo({url: "/pages/common/imageCropper/index?callbackMethod=companyInfoCropperSuccess&width=200&height=200&imageSrc=" + encodeURIComponent(this.companyAvatar)});
    },
    /** 用户头像图片剪切成功回调方法，上传头像 */
    cropperSuccess(base64, type) {
      // Base64字符串转二进制流
      let arrayBuffer = uni.base64ToArrayBuffer(base64.replace(/^data:image\/\w+;base64,/, ""))
      // 二进制流转blob
      let blob = new Blob([arrayBuffer], {type: "image/png"});
      uni.uploadFile({
        url: this.host + "/console/avatar",
        file: blob,
        header: {'Authorization': 'Bearer ' + getToken(),},
        name: 'avatarfile',
        success: (res) => {
          let data = JSON.parse(res.data);
          let company = data.company;
          this.$store.commit('SET_COMPANY_INFO', company);
          uni.showToast({title: "修改成功", icon: 'success'});
          // 延迟500毫秒显示效果
          setTimeout(() => {
            this.getInfo();
          }, 500);
        }
      });
    },
    // =================================================================================================================
    // ==== 页面跳转
    // =================================================================================================================
    /** 签署明细 */
    signList() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/signFlowFeeRecord/comapnySignFlowFeeRecord')
    },
    /** 立即购买 */
    product() {
      this.$tab.navigateTo('/pages/mine/work/product/index')
    },
    /** 签署记录 */
    signRecord() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/companyIndex')
    },
    /** 余额明细 */
    balanceList() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/balance/companyBalance')
    },
    /** 余额充值-企业-信息-余额充值 */
    recharge() {
      this.$goPay();
    },
    /** 充值记录 */
    balanceDetailed() {
      this.$tab.navigateTo('/pages/mine/personal/product/balancePay/index')
    },

    /** 拨打电话 */
    phone() {
      uni.makePhoneCall({phoneNumber: '400-891-3655'});
    },
    /** 注销企业 */
    logOff() {
      this.$refs.logOff.openDialog()
    },
    /** 企业名称变更 */
    toModifyCompanyInfo() {
      this.$refs.modifyCompanyInfo.toOpenDialog();
    },
    /** 查看执照 */
    openidCardVisible() {
      this.$tab.navigateTo('./credentialPreview?validDate=' + this.companyInfo.validDate)
    },
    /** 法人变更*/ 
    toShowEditLegalDialog(type) {
      this.$refs.modifyCompanyLegal.toOpenDialog(type);
    },
    /** 管理员转授*/
    toShowEditAdminDialog() {
      this.$refs.modifyCompanyAdmin.toOpenDialog();
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .uni-list-item--hover {
  background: none;
}

.certify-time {
  margin-top: 8rpx;
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  span{
	  color: #666;
	  font-size: 28rpx;
  }

  view {
    color: #999;
  }
}

.optino_btn {
  display: inline-block;
  background: #e6f6ef;
  color: $uni-color-primary;
  borde: 1rpx solid #99dbbf;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  margin-top: 30rpx;
  border-radius: 6rpx;
}

.list-item {
  padding: 20rpx 40rpx;
}

::v-deep .uni-dialog-content {
  display: block;
}

::v-deep .uni-list-item__container {
  align-items: center;
}

.info-tag {
  height: 28rpx;
}

.card-body-desc {
  margin-left: 40rpx;
}

.slot-header {
  width: 76.7%;
}

::v-deep .uni-list-item {
  font-size: 28rpx;
  padding: 3rpx 10rpx;
}

::v-deep .uni-list-item__extra-text {
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
}

.header_block {
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx 20rpx 30rpx;
  background: #e6f6ef;

  .body_center {
    font-size: 30rpx;
    margin-left: 20rpx;
    width: 90%;
  }

  // 头像
  .user_avater {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }

  .isCertify_cell {
    margin: 8rpx 0 0;
    font-size: 24rpx;
    color: #555555;
  }
}
</style>
